<template>
  <div>
    <div class="swiper-box container">
      <div class="nav-menu">
        <ul class="menu-wrap">
          <li class="menu-item"><a href="javascript:;">手机 电话卡</a>
            <div class="children">
              <ul>
                <li><a href="/#/product/30"><img src="../assets/imgs/item-box-1.png" alt=""> 小米CC9 </a></li>
                <li><a href="/#/product/31"><img src="../assets/imgs/item-box-2.png" alt=""> 小米8青春版 </a></li>
                <li><a href="/#/product/32"><img src="../assets/imgs/item-box-3.jpg" alt=""> Redmi K20 Pro </a></li>
                <li><a href="/#/product/33"><img src="../assets/imgs/item-box-4.jpg" alt=""> 移动4G专区 </a></li>
              </ul>
              <ul>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
              </ul>
              <ul>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
              </ul>
              <ul>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
              </ul>
              <ul>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
              </ul>
              <ul>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
                <li><a href=""><img src="../assets/imgs/item-box-1.png" alt=""> 小米9 </a></li>
              </ul>
            </div>
          </li>
          <li class="menu-item"><a href="javascript:;">电视 盒子</a></li>
          <li class="menu-item"><a href="javascript:;">笔记本 平板</a></li>
          <li class="menu-item"><a href="javascript:;">家电 插线板</a></li>
          <li class="menu-item"><a href="javascript:;">出行 穿戴</a></li>
          <li class="menu-item"><a href="javascript:;">智能 路由器</a></li>
          <li class="menu-item"><a href="javascript:;">电源 配件</a></li>
          <li class="menu-item"><a href="javascript:;">生活 箱包</a></li>
        </ul>
      </div>
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide>
          <a href="https://www.mi.com/a/h/28526.html" target="_blank">
            <img src="../assets/imgs/slide1.webp" alt="">
          </a>
        </swiper-slide>
        <swiper-slide>
          <a href="https://www.mi.com/a/h/28526.html" target="_blank">
            <img src="../assets/imgs/slide2.jpg" alt="">
          </a>
        </swiper-slide>
        <swiper-slide>
          <a href="https://www.mi.com/a/h/28526.html" target="_blank">
            <img src="../assets/imgs/slide3.webp" alt="">
          </a>
        </swiper-slide>
        <swiper-slide>
          <a href="https://www.mi.com/a/h/28526.html" target="_blank">
            <img src="../assets/imgs/slide4.webp" alt="">
          </a>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </div>
    <div class="phone-pro container">
      <div class="channels">
        <a href="#" class="channel">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
          保障服务
        </a>
        <a href="#" class="channel">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="">
          企业团购
        </a>
        <a href="#" class="channel">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="">
          企业团购
        </a>
        <a href="#" class="channel">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&amp;h=48"
               alt="F码通道">
          F码通道
        </a>
        <a href="#" class="channel">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&amp;h=48"
               alt="米粉卡">
          米粉卡
        </a>
        <a href="#" class="channel">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&amp;h=48"
               alt="米粉卡">
          米粉卡
        </a>
      </div>
      <div class="phone">
        <a href="#">
          <img v-lazy="require('../assets/imgs/phone-pro-1.jpg')" alt="">
        </a>
        <a href="#">
          <img v-lazy="require('../assets/imgs/phone-pro-2.jpg')" alt="">
        </a>
        <a href="#">
          <img v-lazy="require('../assets/imgs/phone-pro-3.jpg')" alt="">
        </a>
      </div>
    </div>
    <div class="home-main">
      <div class="container">
        <div class="banner">
          <a href="#">
            <img v-lazy="require('../assets/imgs/banner.webp')" alt="">
          </a>
        </div>
        <phone-box :title="'手机'" :more-link="'https://www.mi.com/p/1915.html'"
                   :phone-list="phoneList"></phone-box>
        <phone-box :title="'智能穿戴'" :more-link="'https://www.mi.com/p/1915.html'"
                   :phone-list="phoneList"></phone-box>
        <phone-box :title="'笔记本 | 平板'" :more-link="'https://www.mi.com/p/1915.html'"
                   :phone-list="phoneList"></phone-box>
        <phone-box :title="'家电'" :more-link="'https://www.mi.com/p/1915.html'"
                   :phone-list="phoneList"></phone-box>
      </div>
    </div>
    <mall-service>
    </mall-service>
  </div>
</template>

<script>
import MallService from "@/components/MallService";
import PhoneBox from "@/components/PhoneBox";
import {Swiper, SwiperSlide} from 'vue-awesome-swiper'
import {userInfo} from "@/api/user";
import {getCartCount} from "@/api/product";

export default {
  name: "MallIndex",
  components: {
    MallService,
    PhoneBox,
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      phoneList: [
        {
          imgPath: require('../assets/imgs/phone-left.webp'),
          title: '',
          desc: ''
        },
        {
          id: 33,
          imgPath: require('../assets/imgs/phone-right.webp'),
          title: 'Redmi Note 12 Turbo',
          desc: '狂暴引擎 超强性能释放',
          price: '1999元起'
        },
        {
          id: 1002,
          imgPath: require('../assets/imgs/phone-right.webp'),
          title: 'Redmi Note 12 Turbo',
          desc: '狂暴引擎 超强性能释放',
          price: '1999元起'
        },
        {
          id: 1003,
          imgPath: require('../assets/imgs/phone-right.webp'),
          title: 'Redmi Note 12 Turbo',
          desc: '狂暴引擎 超强性能释放',
          price: '1999元起'
        },
        {
          id: 1004,
          imgPath: require('../assets/imgs/phone-right.webp'),
          title: 'Redmi Note 12 Turbo',
          desc: '狂暴引擎 超强性能释放',
          price: '1999元起'
        },
        {
          id: 1005,
          imgPath: require('../assets/imgs/phone-right.webp'),
          title: 'Redmi Note 12 Turbo',
          desc: '狂暴引擎 超强性能释放',
          price: '1999元起'
        },
        {
          id: 1006,
          imgPath: require('../assets/imgs/phone-right.webp'),
          title: 'Redmi Note 12 Turbo',
          desc: '狂暴引擎 超强性能释放',
          price: '1999元起'
        },
        {
          id: 1007,
          imgPath: require('../assets/imgs/phone-right.webp'),
          title: 'Redmi Note 12 Turbo',
          desc: '狂暴引擎 超强性能释放',
          price: '1999元起'
        },
        {
          id: 1008,
          imgPath: require('../assets/imgs/phone-right.webp'),
          title: 'Redmi Note 12 Turbo',
          desc: '狂暴引擎 超强性能释放',
          price: '1999元起'
        }
      ]
    }
  },
  methods: {
    getUser(){
      userInfo().then(res => {
        this.$cookies.set("id", res.id)
        this.$store.dispatch("saveUserName", res.username)
      }).catch(function () {
      })
    },
    getCartCount(){
      getCartCount().then((res=0) => {
        this.$store.dispatch('saveCartCount',res);
      }).catch(function () {
      })
    }
  },
  mounted() {
    this.getUser();
    this.getCartCount();
  }
}
</script>

<style lang="scss" scoped>
.swiper {
  height: 451px;
  --swiper-pagination-color: #f60;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;

  img {
    width: 100%;
    height: 100%;
  }
}

.swiper-button-prev {
  left: 245px;
}

.swiper-box {
  .nav-menu {
    position: absolute;
    width: 234px;
    height: 451px;
    padding: 26px 0;
    z-index: 9;
    background-color: rgba(85, 88, 90, .4784313725);

    .menu-wrap {
      .menu-item {
        height: 50px;
        line-height: 50px;

        &:hover {
          .children {
            display: block;
          }

          background-color: #f60;
        }

        a {
          position: relative;
          display: block;
          font-size: 16px;
          color: #fff;
          padding-left: 30px;

          &:after {
            position: absolute;
            right: 30px;
            top: 17.5px;
            content: " ";
            display: inline-block;
            width: 10px;
            height: 15px;
            background: url('~@/assets/imgs/icon-arrow.png') no-repeat 50%;
            background-size: contain;
          }
        }

        .children {
          display: none;
          width: 992px;
          height: 451px;
          background-color: #fff;
          position: absolute;
          top: 0;
          left: 234px;
          border: 1px solid #e5e5e5;

          ul {
            display: flex;
            justify-content: space-between;
            height: 75px;

            li {
              height: 75px;
              line-height: 75px;
              flex: 1;
              padding-left: 23px;
            }

            a {
              color: #333;
              font-size: 14px;
            }

            img {
              width: 42px;
              height: 35px;
              vertical-align: middle;
              margin-right: 15px;
            }
          }
        }
      }
    }
  }
}

.phone-pro {
  display: flex;
  margin-top: 14px;
  margin-bottom: 26px;

  .channels {
    display: flex;
    flex-wrap: wrap;
    width: 234px;
    height: 170px;
    background-color: #5f5750;

    .channel {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 76px;
      height: 82px;
      font-size: 12px;
      color: #ffffff;
      opacity: .7;

      img {
        width: 24px;
        height: 24px;
        margin-bottom: 4px;
      }

      &:hover {
        opacity: 1;
      }

      &:before {
        position: absolute;
        content: "";
        background: #665e57;
        top: 3px;
        left: 6px;
        width: 64px;
        height: 1px;
      }

      &:after {
        position: absolute;
        content: "";
        background: #665e57;
        top: 3px;
        left: 3px;
        width: 1px;
        height: 64px;
      }
    }
  }

  .phone {
    display: flex;
    flex: 1;
    margin-left: 14px;
    justify-content: space-between;

    a {
      width: 316px;
      height: 170px;
      transition: box-shadow .2s linear, -webkit-box-shadow .2s linear;

      img {
        width: 100%;
        height: 100%;
      }

      &:hover {
        box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
      }
    }
  }
}

.home-main {
  background-color: #f5f5f5;
  padding-top: 4px;
  padding-bottom: 12px;

  .banner {
    height: 120px;
    margin: 22px 0;
    overflow: hidden;
  }
}

</style>
